<template>
	<view class="flex-col page">
		<view class="flex-col group_1">
			<scroll-view scroll-y="true" v-if="list.length>0" :style="{height:scrollHeight+'px'}"
				@scrolltolower="loadmore">
				<view class="flex-col list">
					<view class="flex-col list-item" :key="i" v-for="(item, i) in list">
						<view class="flex-row">
							<view>
								<image :src="item.address" mode=""></image>
							</view>
							<view>
								{{item.consumerName}}({{item.consumerRemark}})
							</view>
							<!-- <view>
								{{item.consumerName}}({{item.inspectionConsumerRemark}})
							</view> -->
						</view>
						<view class="line"></view>
						<view class="justify-between">
							<text class="text_1">巡检次数</text>
							<text class="text_333">第{{item.num}}次巡检</text>
						</view>
						<view class="justify-between">
							<text class="text_1">下次巡检项目</text>
							<text class="text_3">{{item.processName}}</text>
						</view>
						<view class="justify-between">
							<text class="text_1">预计下次巡检时间</text>
							<text class="text_3">{{item.inspectionDate}}</text>
						</view>
						<view class="justify-between group_3">
							<view class="group_4">
							</view>
							<text class="text_21" @click="del(item.id,i)">删除</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="" v-else>
				<u-empty style="height: 100vh;" width="250" mode="data" textSize="30rpx"
					icon="http://cdn.uviewui.com/uview/empty/order.png">
				</u-empty>
			</view>
			<view class="flex-col items-end section_5" @click="deleteAll">
				<view class="flex-col items-center text-wrapper"><text class="text_45">清空消息</text></view>
			</view>
		</view>
		<u-loadmore v-show="more" height="100" fontSize="26" :status="status" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				more: false,
				status: 'loadmore',
				scrollHeight: 0,
				page: {
					pageNum: 1,
					pageSize: 10
				}
			};
		},
		created() {
			this.queryOrderMessage();
		},
		mounted() {
			this.getScrollHeight();
		},
		methods: {
			getScrollHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.page').boundingClientRect();
				query.select('.section_5').boundingClientRect();
				query.exec(r => {

					//进入页面滚动到底部
					this.scrollHeight = r[0].height - r[1].height;

				});
				console.log(this.scrollHeight);
			},
			queryOrderMessage(type = 0) {
				this.$http('message.queryInspectionMessage', {
					pageSize: 1,
					pageNum: 10
				}).then(r => {
					if (r.code == 200 && r.data) {
						if (type == 0) {
							this.list = r.data
						} else {
							if (r.data.length > 0) {
								this.list = this.list.concat(r.data);
								this.status = "loadmore";
							} else {
								this.status = "nomore";

							}

						}

					}
				});
			},
			loadmore() {
				// this.status = "loading";
				this.more = true;
				this.page.pageNum++;
				this.queryOrderMessage(1)
			},
			deleteAll() {
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '确认清空吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "删除",
					//删除字体的颜色
					confirmColor: 'red',
					//取消字体的颜色
					cancelColor: '#000000',
					success: res => {
						if (res.confirm) {
							this.$http('linfomation.deleteAllInspectionPrompt').then(r => {
								if (r.code == 200) {
									this.list = [];
								}
							});
						} else {
							// 执行取消后的操作
						}
					}


				})
			},
			del(id, i) {

				uni.showModal({
					title: '提示',
					// 提示文字
					content: '确认删除该条信息吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "删除",
					//删除字体的颜色
					confirmColor: 'red',
					//取消字体的颜色
					cancelColor: '#000000',
					success: res => {
						if (res.confirm) {
							this.$http('message.deleteInspectionPrompt', {
								inspectionMessageId: id
							}).then(r => {
								if (r.code == 200) {
									this.list.splice(i, 1);
								}
							});
						} else {
							// 执行取消后的操作
						}
					}


				})

			},
		},
	};
</script>

<style scoped lang="scss">
	.list-item {
		padding: 29rpx 22rpx 0 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}
	.list-item image{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.text_5 {
		margin-top: 36rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		margin-top: 17rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_9 {
		margin-top: 23rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_3 {
		margin-top: 32rpx;
		padding: 22rpx 0 39rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.text_1 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		margin-top: 12rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}
	.text_333{
		margin-top: 12rpx;
		color: #00aaff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_4 {
		line-height: 28rpx;
		height: 28rpx;
	}

	.text_21 {
		color: #ff371d;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_11 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_13 {
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_15 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_17 {
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_19 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group_1 {
		flex: 1 1 auto;
		overflow-y: auto;

	}

	.list {
		padding: 15rpx 24rpx 42rpx;
	}

	.section_5 {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 0;
		height: 94rpx;
		background-color: #ffffff;
		box-shadow: 0px -2rpx 4rpx 0px #00000014;
	}

	.list-item:not(:first-of-type) {
		margin-top: 20rpx;
	}

	.text-wrapper {
		margin-right: 32rpx;
		padding: 9rpx 0 19rpx;
		background-color: #1d6aff14;
		border-radius: 28rpx;
		width: 148rpx;
	}

	.text_45 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}
	.line{
		width: 100%;
		height: 2rpx;
		background-color: #eee;
		margin: 20rpx 0;
	}
</style>
